extends ../layout.pug

block title
  title 个人中心

block stylesheets
  link(rel="stylesheet", href="/css/index.css")

block vars
  - var bodyClass = 'ui-loading'
block body
  div#app
  //- div.user
  //-   div.user__avatar
  //-     img(src="/temp/B1cVSzK7b.png", alt="头像")
  //-   div.user__info
  //-     div.user__name 玩家微信名
  //-     div.user__winRatio 总胜率 22%

  //- div.stat
  //-   div.stat__heading
  //-     div.heading__title.heading__title--active 血战到底
  //-     div.heading__title 血流成河
  //-   div.stat__list
  //-     div.ratio__hu
  //-       span.ratio__digital #{board.xzdd.huRatio}
  //-       span.ratio__text 胡牌率
  //-     div.ratio__pao
  //-       span.ratio__digital #{board.xzdd.paoRatio}
  //-       span.ratio__text 点炮率
  //-     div.ratio__ting
  //-       span.ratio__digital #{board.xzdd.tingRatio}
  //-       span.ratio__text 听牌率
  //-     div.maxTime
  //-       span.ratio__digital #{board.xzdd.maxTimes}
  //-       span.ratio__text 最大胡牌番

  //- div.menu
  //-   a.menu__item(href="/wechat/personalHome/match-records")
  //-     span.icon__record
  //-     | 牌局记录
  //-     span.icon__next

  //-   a.menu__item(href="/wechat/personalHome/mahjong-address")
  //-     span.icon__address
  //-     | 麻将馆地址
  //-     span.icon__next

  //- button.button--clear 清理数据

  script#tpl(type="x-template")
    div
      div.user
        div.user__avatar
          img(:src="user.avatar", alt="头像")
        div.user__info
          div.user__name #{user.nickname}
          div.user__winRatio 总胜率 {{winRatio | percent}}
      div.stat
        div.stat__heading
          div.heading__title(@click="switchStat('xzdd', 'xzdd')", :class="{ 'heading__title--active': activeStat === 'xzdd' }") 血战到底
          div.heading__title(@click="switchStat('xlch', 'xlch')", :class="{ 'heading__title--active': activeStat === 'xlch' }") 血流成河
        div.stat__list
          div.ratio__hu
            span.ratio__digital {{board[activeStat].huRatio | percent}}
            span.ratio__text 胡牌率
          div.ratio__pao
            span.ratio__digital {{board[activeStat].paoRatio | percent}}
            span.ratio__text 点炮率
          div.ratio__ting
            span.ratio__digital {{board[activeStat].tingRatio | percent}}
            span.ratio__text 听牌率
          div.maxTime
            span.ratio__digital {{board[activeStat].maxTimes}}
            span.ratio__text 最大胡牌番
      div.menu
        a.menu__item(href=`/wechat/personalHome/match-records?id=${user.id}`)
          span.icon__record
          | 牌局记录
          span.icon__next

        a.menu__item(href="/wechat/personalHome/mahjong-address")
          span.icon__address
          | 麻将馆地址
          span.icon__next

      button.button--clear(@click="clearRecords") 清理数据

block scripts
  script.
    function getResponseData(response) {
      return response.data
    }

    try {
      if (window.user) {
        localStorage.setItem('user', JSON.stringify(window.user))
      }
    } catch (err) {
      console.log(err)
    }

    function log(message) {
      console.log(message)
    }

    new Vue({
      el: '#app',
      template: '#tpl',
      data: function () {
        return {
          user: !{JSON.stringify(user)},
          board: !{JSON.stringify(board)},
          activeStat: 'xzdd',
          winRatio: !{JSON.stringify(winRatio)},
        }
      },
      methods: {
        switchStat: function(prop, type) {
          this.fetchBoard('/wechat/board', type)
        },
        fetchBoard: function(url, type) {
          var self = this
          axios
            .get(url, { params: { type: type, userid: this.user.id } })
            .then(getResponseData)
            .then(function(data) {
              self.activeStat = type
              self.board[type] = data
            })
            .catch(function(err) {
              console.error(err)
            })
        },
        clearRecords: function () {
          log('clear data')
        }
      },
      filters: {
        percent: function (value) {
          return ((value * 100) | 0) + '%'
        }
      },
      mounted: function() {
        window.setTimeout(function() {
          document.body.className = ''
          }, 300)
      }
    })
